<template>
    <view>
        <form @reset="formReset" @submit="tjddformSubmit" :reportSubmit="true">
            <view class="page">
                <view class="head weui-cells weui-cells_after-title" :style="'background:' + color">
                    <view class="weui-cell">
                        <view class="weui-cell__hd">
                            <image :src="userInfo.img"></image>
                        </view>
                        <view class="weui-cell__bd">
                            <view>
                                <text>{{ userInfo.name }}</text>
                                <text v-if="userInfo.user_tel != ''">（{{ userInfo.user_tel }}）</text>
                            </view>
                            <view v-if="userInfo.ishy == '2'">您还不是超级会员</view>
                            <view style="font-size: 28rpx; font-width: blod;" v-else>
                              <view>已经开通了会员卡</view>
                              <view>有效期：{{ userInfo.dq_time }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view  v-if="userInfo.ishy == '2'" class="blbanner">
                    <view class="b-head" :style="'border-color:' + color">
                        请选择开通时间
                        <text style="font-size: 22rpx"></text>
                    </view>
                </view>
				
				
				
                <view v-if="userInfo.ishy == '2'" class="weui-cells weui-cells_after-title radiogroup" style="background: #fff; padding: 20rpx 30rpx">
                    <radio-group @change="radioChange" name="radiogroup">
                        <label :class="'weui-cell weui-check__label ' + (item.checked ? 'active' : '')" v-for="(item, index) in radioItems" :key="item.value">
                            <view class="weui-cell__bd flex-bet flex-y-center">
                                <text>{{ item.days }}个月</text>
                                <text>￥{{ item.money }}元</text>
                            </view>

                            <radio :checked="item.checked" class="weui-check" :value="item.id"></radio>

                            <view class="weui-cell__hd weui-check__hd_in-checkbox">
                                <icon class="weui-icon-checkbox_circle" color="#DEDEDE" size="23" type="circle" v-if="!item.checked"></icon>
                                <icon class="weui-icon-checkbox_success" color="#FFFFFF" size="23" type="success" v-if="item.checked"></icon>
                            </view>
                        </label>
                    </radio-group>
                </view>
                <view class="blbanner" style="margin-top: 20rpx">
                    <view class="b-head" :style="'border-color:' + color">
                      <text  v-if="userInfo.ishy == '2'">请填写会员信息</text>
                      <text  v-else>我的会员信息</text>
                        <text style="font-size: 22rpx"></text>
                    </view>
                </view>
                <view class="weui-cells weui-cells_after-title hyxx">
                    <view class="weui-cell weui-cell_input">
                        <view class="weui-cell__hd">
                            <view class="weui-label">姓名</view>
                        </view>
                        <view class="weui-cell__bd">
                            <input class="weui-input" name="lxr" placeholder="请输入姓名" :value="lxr" />
                        </view>
                    </view>
                    <view class="weui-cell weui-cell_input weui-cell_vcode flex-y-center">
                        <view class="weui-cell__hd">
                            <view class="weui-label">手机号</view>
                        </view>
                        <view class="weui-cell__bd">
                            <input class="weui-input" name="tel" placeholder="请输入手机号" :value="tel" />
                        </view>
                    </view>
                </view>

                <view v-if="userInfo.ishy == '2'" class="read">
                    <radio :checked="true" :color="color" style="zoom: 80%"></radio>
                    <view>
                        我已阅读并同意以下
                        <text @tap="lookck" class="readfont">《开通会员卡协议》</text>
                    </view>
                </view>

                <view class="blbanner">

                    <view class="b-head" :style="'border-color:' + color">
                      <text  v-if="userInfo.ishy == '2'">开通会员卡协议</text>
                      <text  v-else>会员卡协议</text>
                    </view>
                </view>
                <view class="xynr">
                    <rich-text :nodes="xtxx.kt_details"></rich-text>
                </view>
            </view>
            <view class="foot flex-row flex-y-center" v-if="userInfo.ishy == '2'">
                <view class="flex-grow-1 zj">
                    总价
                    <text>￥{{ zfmoney }}</text>
                </view>
                <button class="flex-grow-0 ljkt" formType="submit" :style="'background:' + color">立即购买</button>
            </view>
        </form>
        <form @reset="formReset" @submit="formSubmit" :reportSubmit="true">
            <view @tap="yczz" class="drawer_screen" v-if="showModal"></view>
            <view class="drawer_box" v-if="showModal">
                <view class="drawer_title">请选择支付方式</view>
                <view class="weui-cells weui-cells_after-title">
                    <radio-group @change="radioChange1" class="radio-group" name="radiogroup">
                        <label>
                            <view class="weui-cell">
                                <view class="zfimg">
                                    <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/weixin.png"></image>
                                </view>
                                <view class="weui-cell__bd">微信支付</view>
                                <view class="weui-cell__ft">
                                    <radio :checked="zffs == 1" value="wxzf"></radio>
                                </view>
                            </view>
                        </label>
                        <label v-if="kqyue">
                            <view class="weui-cell" style="border-top: 1rpx solid #e6e6e6">
                                <view class="zfimg">
                                    <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/yeqb.png"></image>
                                </view>
                                <view class="weui-cell__bd">
                                    余额支付
                                    <text class="yetext">您的余额 {{ userInfo.wallet }}</text>
                                </view>
                                <view class="weui-cell__ft">
                                    <radio :checked="zffs == 2" color="#FF9700" :disabled="!kqyue" value="yezf"></radio>
                                </view>
                            </view>
                        </label>
                    </radio-group>
                </view>
                <view class="drawer_title1">
                    您选择的{{ zfwz }}
                    <text v-if="zffs == 3">({{ jf_proportion }}积分可抵1元)</text>
                </view>
                <button :class="btntype" :disabled="zfz" formType="submit">
                    <view v-if="!zfz && zffs != 4">
                        确定支付
                        <text class="zftext">￥{{ zfmoney }}</text>
                    </view>
                    <view v-if="!zfz && zffs == 4">
                        确定到付
                        <text class="zftext">￥{{ zfmoney }}</text>
                    </view>
                    <view v-if="zfz">
                        <text class="zfztext">支付中...</text>
                    </view>
                </button>
            </view>
        </form>
    </view>
</template>

<script>
import cardlist from '@/ymq_canyino2o/dist/cardlist/index';
import gettel from '@/ymq_canyino2o/dist/gettel/index';
var app = getApp();
var util = require('../../utils/util.js');
export default {
    components: {
        cardlist,
        gettel
    },
    data() {
        return {
            fwxy: true,
            radioItems: [],
            showModal: false,
            zffs: 1,
            zfz: false,
            zfwz: '微信支付',
            btntype: 'btn_ok1',
            isbd: false,
            bdsjhtext: '验证微信手机号',

            xtxx: {
                kt_details: ''
            },

            kqyue: false,
            zfmoney: '',
            month: '',
            kttext: '',

            userInfo: {
                img: '',
                name: '',
                user_tel: '',
                ishy: '',
                dq_time: '',
                wallet: ''
            },

            lxr: '',
            tel: '',
            sjh: '',
            mdoaltoggle: false,
            color: '',
            jf_proportion: ''
        };
    },
    onLoad: function (t) {
        app.globalData.setNavigationBarColor(this);
        var e = util.formatTime(new Date());
        var a = util.formatTime(new Date()).substring(0, 10).replace(/\//g, '-');
        var o = util.formatTime(new Date()).substring(11, 16);
        console.log(e, a.toString(), o.toString());
        var that = this;
        var n = uni.getStorageSync('users').id;
        this.setData({
            xtxx: getApp().globalData.xtxx
        });
        if ('1' == getApp().globalData.xtxx.is_yuepay) {
            this.setData({
                kqyue: true
            });
        }
        app.globalData.util.request({
            url: 'entry/wxapp/GetHyqx',
            cachetime: '0',
            success: function (t) {
                console.log(t.data);
                if (0 < t.data.length) {
                    t.data[0].checked = true;
                    that.setData({
                        radioItems: t.data,
                        zfmoney: t.data[0].money,
                        month: t.data[0].days
                    });
                }
            }
        });
        app.globalData.util.request({
            url: 'entry/wxapp/UserInfo',
            cachetime: '0',
            data: {
                user_id: n
            },
            success: function (t) {
                console.log(t);
                if ('' == t.data.dq_time || t.data.dq_time < a.toString()) {
                    t.data.ishy = 2;
                } else {
                    that.setData({
                        kttext: '立即续费'
                    });
                }
                that.setData({
                    userInfo: t.data,
                    lxr: t.data.user_name,
                    tel: t.data.user_tel
                });
            }
        });
    },
    onReady: function () {},
    onShow: function () {},
    onHide: function () {},
    onUnload: function () {},
    onPullDownRefresh: function () {},
    onReachBottom: function () {},
    methods: {
        getPhoneNumber: function (t) {
            var that = this;
            console.log(t);
            console.log(t.detail.iv);
            console.log(t.detail.encryptedData);
            if ('getPhoneNumber:fail user deny' == t.detail.errMsg) {
                uni.showModal({
                    title: '提示',
                    showCancel: false,
                    content: '您未授权获取您的手机号',
                    success: function (t) {}
                });
            }
            if ('getPhoneNumber:ok' == t.detail.errMsg) {
                app.globalData.util.request({
                    url: 'entry/wxapp/Jiemi',
                    cachetime: '0',
                    data: {
                        sessionKey: getApp().globalData.getSK,
                        data: t.detail.encryptedData,
                        iv: t.detail.iv
                    },
                    success: function (t) {
                        console.log('解密后的数据', t);
                        if (null != t.data.phoneNumber) {
                            that.setData({
                                sjh: t.data.phoneNumber,
                                isbd: true,
                                bdsjhtext: '验证成功'
                            });
                        }
                    }
                });
            }
        },

        yczz: function () {
            this.setData({
                showModal: false
            });
        },

        radioChange1: function (t) {
            console.log('radio1发生change事件，携带value值为：', t.detail.value);
            if ('wxzf' == t.detail.value) {
                this.setData({
                    zffs: 1,
                    zfwz: '微信支付',
                    btntype: 'btn_ok1'
                });
            }
            if ('yezf' == t.detail.value) {
                this.setData({
                    zffs: 2,
                    zfwz: '余额支付',
                    btntype: 'btn_ok2'
                });
            }
            if ('jfzf' == t.detail.value) {
                this.setData({
                    zffs: 3,
                    zfwz: '积分支付',
                    btntype: 'btn_ok3'
                });
            }
            if ('hdfk' == t.detail.value) {
                this.setData({
                    zffs: 4,
                    zfwz: '货到付款',
                    btntype: 'btn_ok4'
                });
            }
        },

        tjddformSubmit: function (t) {
            console.log(t.detail, 'formid', t.detail.formId, this.radioItems);
            uni.getStorageSync('users').id;
            if (0 != this.radioItems.length) {
                if ('' != t.detail.value.lxr && '' != t.detail.value.tel && '11' == t.detail.value.tel.length) {
                    this.setData({
                        showModal: true,
                        lxr: t.detail.value.lxr,
                        tel: t.detail.value.tel
                    });
                } else {
                    uni.showModal({
                        title: '提示',
                        content: '请完善会员信息或手机号不正确'
                    });
                }
            } else {
                uni.showModal({
                    title: '提示',
                    content: '对不起！暂无添加优惠套餐，无法购买'
                });
            }
        },

        radioChange: function (t) {
            console.log('radio发生change事件，携带value值为：', t.detail.value);
            for (var e = this.radioItems, a = 0, o = e.length; a < o; ++a) {
                e[a].checked = e[a].id == t.detail.value;
                if (e[a].checked) {
                    this.setData({
                        zfmoney: e[a].money,
                        month: e[a].days
                    });
                }
            }
            this.setData({
                radioItems: e
            });
        },

        formSubmit: function (a) {
            var that = this;
            var i = a.detail.formId;
            var n = this.userInfo.openid;
            var t = this.userInfo.id;
            var l = Number(this.zfmoney);
            var e = this.month;
            var s = this.lxr;
            var d = this.tel;
            console.log(n, t, l, i, e, s, d);
            if ('yezf' == a.detail.value.radiogroup) {
                var r = Number(this.userInfo.wallet);
                var u = l;
                console.log(r, u);
                if (r < u) {
                    return void uni.showToast({
                        title: '余额不足支付',
                        icon: 'loading'
                    });
                }
            }
            if ('yezf' == a.detail.value.radiogroup) {
                var c = 2;
            }
            if ('wxzf' == a.detail.value.radiogroup) {
                c = 1;
            }
            if ('jfzf' == a.detail.value.radiogroup) {
                c = 3;
            }
            if ('hdfk' == a.detail.value.radiogroup) {
                c = 4;
            }
            console.log('支付方式', c);
            if ('' == i) {
                uni.showToast({
                    title: '没有获取到formid',
                    icon: 'loading',
                    duration: 1000
                });
            } else {
                this.setData({
                    zfz: true
                });
                app.globalData.util.request({
                    url: 'entry/wxapp/AddHyOrder',
                    cachetime: '0',
                    data: {
                        user_id: t,
                        money: l,
                        month: e,
                        pay_type: c,
                        user_name: s,
                        user_tel: d
                    },
                    success: function (t) {
                        console.log(t);
                        var e = t.data;
                        that.setData({
                            zfz: false,
                            showModal: false
                        });
                        if ('yezf' == a.detail.value.radiogroup) {
                            console.log('余额流程');
                            if ('下单失败' != e) {
                                uni.showModal({
                                    title: '提示',
                                    content: '购买成功'
                                });
                                app.globalData.userInfo = null;
                                setTimeout(function () {
                                    uni.navigateBack({});
                                }, 1000);
                            } else {
                                uni.showToast({
                                    title: '支付失败',
                                    icon: 'loading'
                                });
                            }
                        }
                        if ('hdfk' == a.detail.value.radiogroup) {
                            console.log('货到付款流程');
                            if ('下单失败' != e) {
                                that.setData({
                                    mdoaltoggle: false
                                });
                                setTimeout(function () {
                                    uni.reLaunch({
                                        url: '../wddd/order'
                                    });
                                }, 1000);
                            } else {
                                uni.showToast({
                                    title: '支付失败',
                                    icon: 'loading'
                                });
                            }
                        }
                        if ('wxzf' == a.detail.value.radiogroup) {
                            console.log('微信支付流程');
                            if (0 == l) {
                                uni.showModal({
                                    title: '提示',
                                    content: '0元买单请选择其他方式支付'
                                });
                                that.setData({
                                    zfz: false
                                });
                            } else {
                                if ('下单失败' != e) {
                                    app.globalData.util.request({
                                        url: 'entry/wxapp/pay',
                                        cachetime: '0',
                                        data: {
                                            openid: n,
                                            money: l,
                                            order_id: e,
                                            type: 3
                                        },
                                        success: function (t) {
                                            console.log(t);
                                            uni.requestPayment({
                                                timeStamp: t.data.timeStamp,
                                                nonceStr: t.data.nonceStr,
                                                package: t.data.package,
                                                signType: t.data.signType,
                                                paySign: t.data.paySign,
                                                success: function (t) {
                                                    console.log(t.data);
                                                    console.log(t);
                                                    console.log(i);
                                                },
                                                complete: function (t) {
                                                    console.log(t);
                                                    if ('requestPayment:fail cancel' == t.errMsg) {
                                                        uni.showToast({
                                                            title: '取消支付',
                                                            icon: 'loading',
                                                            duration: 1000
                                                        });
                                                    }
                                                    if ('requestPayment:ok' == t.errMsg) {
                                                        uni.showModal({
                                                            title: '提示',
                                                            content: '购买成功'
                                                        });
                                                        app.globalData.userInfo = null;
                                                        setTimeout(function () {
                                                            uni.navigateBack({});
                                                        }, 1000);
                                                    }
                                                }
                                            });
                                        }
                                    });
                                }
                            }
                        }
                    }
                });
            }
        },

        formReset() {
            console.log('占位：函数 formReset 未声明');
        },

        lookck() {
            console.log('占位：函数 lookck 未声明');
        }
    }
};
</script>
<style>
@import './kthy.css';
</style>
